<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>17.扫光</title>
</head>
<body>
	<canvas id="canvas" style="background-color: #757575;"></canvas>
	<script src="https://webglfundamentals.org/webgl/resources/webgl-utils.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/m4.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/primitives.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/texture-utils.js"></script>
	<script src="https://webglfundamentals.org/webgl/resources/chroma.min.js"></script>
	<script type="x-shader/x-vertex" id="vertex">
		attribute vec4 a_position;
		attribute vec3 a_normal;
		uniform mat4 u_projection;
		uniform vec3 u_lightWorldPosition;
		uniform vec3 u_lightWorldPosition2;
		uniform mat4 u_view;
		uniform mat4 u_world;
		varying vec3 v_normal;
		
		varying vec3 v_surfaceToLight;
		varying vec3 v_surfaceToLight2;
		varying vec3 v_surfaceToView;
		varying vec3 iPosition;
		void main(){
			gl_Position =  u_projection * u_view * u_world * a_position;
			//gl_Position.xyz/=1.02;
			iPosition=a_position.xyz;
			v_normal=(u_world*vec4(a_normal,1.)).xyz;
			v_surfaceToView=(u_world*vec4(a_position)).xyz;
			v_surfaceToLight=(vec4(u_lightWorldPosition-v_surfaceToView,1)).xyz;
			v_surfaceToLight2=(vec4(u_lightWorldPosition2-v_surfaceToView,1)).xyz;
		}
	</script>
	<script type="x-shader/x-fragment" id="fragment">
		precision mediump float;
		uniform vec3 u_color;
		uniform float u_time;
		varying vec3 v_normal;
		uniform float u_innerLimit;          // in dot space
		uniform float u_outerLimit;          // in dot space
		varying vec3 v_surfaceToLight;
		varying vec3 v_surfaceToView;
		varying vec3 v_surfaceToLight2;
		varying vec3 iPosition;
		void main(){
			gl_FragColor = vec4(u_color, 1.0 ) ;
			float inLight = smoothstep( u_outerLimit, u_innerLimit,dot(normalize(v_surfaceToView),-normalize(v_surfaceToLight)));//Hermite 插值
			
			float light = inLight * dot(normalize(v_normal), normalize(v_surfaceToView));
			gl_FragColor.rgb*=light;
			float d=dot(normalize(v_surfaceToView),-normalize(v_surfaceToLight));
			float d2=dot(normalize(v_surfaceToView),-normalize(v_surfaceToLight2));
			gl_FragColor = vec4(u_color, 1.0 ) ;
			if(d2<u_innerLimit&&d2>u_outerLimit&&d<u_outerLimit){
				gl_FragColor.a=d;
			}


			float x = iPosition.x-u_time;//x
            float lighty = -x*1.2+u_time;//-x*1.2+time
            float alpha = abs(iPosition.y - lighty);//y-lighty
            if(alpha < 0.1){
                float a = 10.0  -  alpha / .1;
                float enda = smoothstep(0.0,1.0,a) + 0.3;
                gl_FragColor = vec4(u_color,1) * enda;
            }else{
                gl_FragColor = vec4(u_color,1)  * 0.3;
            }
			gl_FragColor = vec4(u_color,1) ;
			float y = iPosition.y;
			  // 一粗一细两束光线
			if ((y < -x && y > -x - 4.8) || (y < -x - 0.2 && y > -x - 0.25)){
				gl_FragColor = mix(gl_FragColor, vec4(1.0), 0.5);
			}
			//float intensity = 1.05 - dot( v_normal, vec3( 0.0, 0.0, 1.0 ) );
			//vec3 atmosphere = vec3( 1.0, 1.0, 1.0 ) * pow( intensity, 3.0 );
			//gl_FragColor = vec4( vec3(0.3,0.5,0.2) + atmosphere, 1.0 );
		}
	</script>
	<script>
		const canvas = document.getElementById("canvas");
		canvas.width=window.innerWidth
		canvas.height=window.innerHeight
		const gl = canvas.getContext("webgl")
		const aspect = gl.canvas.clientWidth/ gl.canvas.clientHeight;
		const programInfo=webglUtils.createProgramInfo(gl,["vertex","fragment"])
		const planeBufferInfo = primitives.createCubeBufferInfo(
			gl,
			20
		);
		// const planeBufferInfo = primitives.createSphereBufferInfo(
		// 	gl,
		// 	20,  // radius
		// 	50, // subdivisions around
		// 	50,  // subdivisions down
		// );
		gl.useProgram(programInfo.program)
		const cameraMatrix = m4.lookAt([0,40,50],[0,0,0],[0,1,0])
		const viewMatrix=m4.inverse(cameraMatrix)
		function degToRad(d) {
			return d * Math.PI / 180;
		}
		
		var cameraPosition = [0, 0, 4];
		var world=m4.translation(0, 0, 0)
		let t=1
		let limit=60
		let innerLimit=0
		let outerLimit=29
		let time=-1
		setInterval(()=>{
			if(innerLimit>=100){
				t=-0.1
			}
			if(innerLimit<=0){
				t=0.1
			}
			innerLimit+=t
			outerLimit+=t
			time+=0.1
			if(time>20){
				time=-1
			}
			console.log("outerLimit:",t);
			gl.useProgram(programInfo.program)
			//world = m4.yRotate(world, 0.001)
			const projectionMatrix=m4.perspective(degToRad(60), aspect, 1, 2000);
			webglUtils.setBuffersAndAttributes(gl, programInfo, planeBufferInfo);
			webglUtils.setUniforms(programInfo, {
				u_view: viewMatrix,					//视图
				u_projection: projectionMatrix,		//投影
				u_world:world,	//世界
				u_lightWorldPosition:[200,-400,0],
				u_lightWorldPosition2:[100,-200,0],
				u_color:[0.5,0.5,0.5],
				u_outerLimit:Math.cos(degToRad(outerLimit)),
				u_innerLimit:Math.cos(degToRad(innerLimit)),
				u_time:time,
			});
			console.log("",time);
			gl.enable(gl.DEPTH_TEST);
			webglUtils.drawBufferInfo(gl, planeBufferInfo);
		},0)
		/*
			扫光

			外圈，内圈之间的有光照，其他地方不影响

		*/
	</script>
</body>
</html>